/**
* @author  cyy
* @description
* @date  2020/1/17 17:43
* @version 1.0
*/
<template>
  <div v-loading=dataLoading class="app-component">
    <div :id="id" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
  export default {
    name: 'baiduMap',
    components: {},
    computed: {},
    props: {
      point: {
        default: () => {
          return [116.404, 39.915]
        }
      },
    },
    data() {
      return {
        dataLoading: false,
        id: 'map' + new Date().getTime()
      }
    },
    watch: {},
    activated() {
    },
    deactivated() {
    },
    created() {
    },
    mounted() {
      setTimeout(() => {
        this.init()
      }, 1000)
    },
    methods: {
      init() {
        this.$nextTick(() => {
          if (document.getElementById(this.id) !== null) {
            var map = new BMap.Map(this.id) // 创建地图实例
            map.centerAndZoom(new BMap.Point(this.point[0], this.point[1]), 16) // 初始化地图，设置中心点坐标和地图级别
            var marker = new BMap.Marker(new BMap.Point(this.point[0], this.point[1])) // 创建点
            map.addOverlay(marker) //增加点
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            map.addControl(top_left_navigation);
          }
        })
      }
    },
    destroyed() {
    }
  }
</script>

<style lang='scss' scoped>
</style>
